<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.6.0.min.js"></script>
	</head>
	<body>
        <input type="text" value="12345">
        <input type="checkbox" id="ck" value="lq">篮球
        <input type="checkbox" id="ck" value="pq">排球
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女
        <span>ssss</span>
        <button id="btn">按钮</button>
        <div id="info">
            <p>张三</p>
            <p>男</p>
            <p>15</p>
            <p>--------</p>
        </div>
    </body>
    <script>
        const a = $('input').val()
        // $('input').val('默认值')
        console.log(a)

        const b = $('#ck')
        $("input[type='checkbox']").val(["lq"])

        const c = $("input[type='checkbox']:checked")
        let selectList = []
        // c.each((index, item) => {
        //     selectList.push(item.value)
        //     console.dir(c[index].value)
        // })
        c.each(function(index, item) {
            selectList.push(item.value)
        })
        console.dir(selectList)
        

        $("input[name='sex']").val(['female'])
        const d = $("input[name='sex']").val()
        console.log(d)
        
        // $('span').css({"font-size":"20px","color":"red"})
        // $('span').text('我被text改变了')
        // $('span').text("<p style='color: blue;'>我被HTML改变了</p>")
        // $('span').html("<p style='color: blue;'>我被HTML改变了</p>")

        const data = [{
            name: '张三',
            sex: '男',
            age: '15'
        },{
            name: '李四',
            sex: '女',
            age: '21'
        },{
            name: '王五',
            sex: '男',
            age: '26'
        }]
        let htmlStr = ""
        // data.forEach(item => {
        //     htmlStr += "<p>姓名："+item.name+"</p><p>性别："+item.sex+"</p><p>年龄："+item.age+"</p><p>--------</p>"
        // })
        data.forEach(item => {
            htmlStr += `<p>姓名：${item.name}</p>
            <p>性别：${item.sex === '男' ? 'male': 'female'}</p>
            <p>年龄：${item.age}</p>
            <p>--------</p>`
        })
        $("#info").html(htmlStr)
        $("#btn").click(function() {
            alert('我被点击了')
        })
    </script>
</html>
